<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item :title="single.article_title" name="1">
        <div class="content">
          <img
            :src="'http://localhost:3001/' + single.article_picture"
            alt=""
          />
          <span v-html="single.article_content">{{
            single.article_content
          }}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    single: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    console.log(1)
  },
  data() {
    return {
      activeNames: ['1'],
    }
  },
  methods: {
    handleChange(val) {},
  },
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* width: 800px; */
  width: 100vw;
  height: 300px;
}
img {
  display: block;
  margin-right: 10px;
  width: 250px;
  height: 300px;
  line-height: 400px;
}
.content span {
  width: 400px;
  height: 400px;
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
  /* line-height: 300px; */
  /* text-align: center; */
  line-height: 35px;
  letter-spacing: 4px;
  text-indent: 2em;
  font-size: 15px 200 normal;
}
</style>
